<template>
  <div id="mapContain" :style="{width: this.pcMobile == 1 ? '600px' : '370px'}"
       style="height:300px;margin-top: 10px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {getStore} from '@/util/store'
import {getMapData, statisticCountByArea} from "@/api/platform/templateManage";


export default {
  props: {
    studentLevel: {
      type: String,
      default: ''
    },
    city: {
      type: String,
      default: ''
    },
    filterCondition: {
      type: Object,
      default: () => {
        return {};
      }
    },
    type: {
      type: String,
      default: ''
    },

  },
  data() {
    return {
      pcMobile: '1', // 1 PC端，2 移动端
    }
  },
  mounted() {
    this.isMobile()
  },
  methods: {
    getMapData(data) {
      var totalValue = 0;
      // 计算总值
      data.forEach(item => {
        totalValue += item.value;
      });
      console.log("total:"+totalValue)
      // 将数据转换为百分比
      const percentageData = data.map(item => {
        // 转换为百分比
        return {
          name: item.name,
          value: (item.value / totalValue * 100).toFixed(2),
          adcode: item.adcode
        }
      });
      var chartDom = document.getElementById('mapContain');
      var myChart = echarts.init(chartDom);
      var option;
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {}
      if (this.type == 0) {
        params.city = newUserInfo.provinceCode
      } else if (this.type == 1) {
        params.city = newUserInfo.cityCode
      }
      // let params = {
      //   city: this.city //'liuzhoushi'
      // }
      getMapData(params).then(res => {
        console.log("result", res)
        echarts.registerMap('HK', res.data.data);
        option = {
          title: {
            text: '整体重度排名',
            // subtext: 'Data from Wikipedia'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}%'
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 0,
            max: 100,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            },
            // 添加 formatter
            formatter: function (value) {
              console.log('value',value)
              // 假设 50000 为最大值
              return value.toFixed(2) + '%';
            }
          },
          series: [
            {
              // name: '香港18区人口密度',
              type: 'map',
              map: 'HK',
              label: {
                show: true
              },
              data: percentageData,
            },
          ]
        }
        myChart.on("click", (params) => {
          console.log('params',params)
          if(this.type == 0){
            // type = 1 : 调用跳转页面的 getUserInfoNew 接口
            // type = 0 : 不调用跳转页面的 getUserInfoNew 接口
            this.$router.push({ path: "/templateManage/municipalEducationBureau",query: {type:'0',code:params.data.adcode} });
          }else if(this.type == 1){
            this.$router.push({ path: "/templateManage/xeducationbureau",query: {type:'0',code:params.data.adcode} });
          }
          // console.log("🚀 ~ file: index.vue:621 ~ this.nxMap.on ~ params:", params)
          //这个是因为地图上有柱状图，点击柱状图也会触发点击事件，所以需要判断一下

        });
        option && myChart.setOption(option);
      })
    },
    // 各区域数据分布图
    getStatisticCountByArea() {
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {}
      if (this.type == 0) {
        params.provinceCode = newUserInfo.provinceCode
      } else if (this.type == 1) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
      }
      params.studentLevel = this.studentLevel
      params.filterCondition = this.filterCondition
      // let params = {
      //   provinceCode: newUserInfo.provinceCode,
      //   cityCode: newUserInfo.cityCode,
      //   studentLevel:this.studentLevel,
      //   filterCondition:this.filterCondition,
      // }
      statisticCountByArea(params).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data
          // let maxValue = Math.max(...data.map(data => data.value));
          // let minValue = Math.min(...data.map(data => data.value));
          this.getMapData(data)

          console.log(data)
        }
      })
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      // 1 PC端，2 移动端
      this.pcMobile = flag ? '2' : '1'
      this.getStatisticCountByArea()
    },
  }

}
</script>

<style scoped>

</style>
